<template>
	<view :style="{display: visible ? 'block' : 'none' }">

		<view class="user-section">
			<image style="padding: 0px" class="bg" src="/static/a.jpeg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" src="/static/missing-face.png"></image>
				</view>
				<view class="info-box">
					<text class="username">游客</text>
				</view>

			</view>
			<view class="vip-card-box">
				<image @click="changeAccount" style="width: 23px;height: 23px;" class="card-bg"
					src="/static/other_account.png" mode=""></image>


			</view>
		</view>
<!-- :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]" -->
		<view class="cover-container"  @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" src="/static/arc.png"></image>


			<view >
				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index" class="nav-item"
						:class="{current: tabCurrentIndex === index}" @click="tabClick(item,index)">
						{{item.text}}
					</view>
				</view>
				<view>
					<view style="width: 100%;line-height:50px;float: left;background: #FFFFFF; padding: 5px 0px;">
						<view style="width: 40%;float: left;text-align: center;font-size: 14px;padding-left: 15px;">
							订单数量(个)：
						</view>
						<view style="width: 60%;float: left;;text-align: left;color: #DD514C;font-size: 23px;">
							{{counts.count}}
						</view>
					</view>
					<view
						style="width: 100%;float: left;line-height:50px;background: #FFFFFF;margin-top: 1rpx;padding: 5px 0px;">
						<view style="width: 40%;float: left;text-align: center;font-size: 14px;padding-left: 15px;">
							订单金额(元)：
						</view>
						<view style="width: 60%;float: left;text-align: left;color: #DD514C;font-size: 23px;">
							{{counts.payTotalAmount}}
						</view>
					</view>
				</view>

			</view>

			<view class="history-section icon">


			</view>

		</view>





	</view>
</template>

<script>
	import {
		getStatisticsType
	} from '@/server/statisticsType.js'
	export default {
		props: {
			visible: Boolean
		},
		data() {
			return {
				tabCurrentIndex: 0,
				counts: {},
				navList: [{
						state: 0,
						text: '今日',
						loadingType: 'more',
						counts: {}
					},
					{
						state: 1,
						text: '近7天',
						loadingType: 'more',
						counts: {}
					},
					{
						state: 2,
						text: '当月',
						loadingType: 'more',
						counts: {}
					},

					{
						state: 3,
						text: '上月',
						loadingType: 'more',
						counts: {}
					}
				],
			}
		},
		created() {
			this.getdatas(this.tabCurrentIndex)
		},
		methods: {
			getdatas(type) {
				uni.showLoading({
					title: "加载中"
				})
				getStatisticsType(type).then(data => {
					uni.hideLoading()
					if (data != null) {
						this.counts = data
					} else {
						this.counts = {
							count: 0,
							payTotalAmount: 0
						}
					}

				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						title: error,
					})
				})
			},
			changeAccount(){
				uni.$emit("active", {
					dorm: "changeConsumers"
				})
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//顶部tab点击
			tabClick(item, index) {
				// this.param.status=item.state
				this.getdatas(index);
				this.tabCurrentIndex = index;

			},
		}
	}
</script>

<style lang="scss">
	page,
	// .clearfix {
	//   content: ".";
	//   display: block;
	//   height: 0;
	//   clear: both;
	//   visibility: hidden;
	// }
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>
<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 520upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .8;
		}
	}

	.user-info-box {
		height: 160upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-lg + 6upx;
			color: #FFFFFF;
			margin-left: 20upx;
		}
	}
	.nickname{
	  color: #fff;
	}
	.userinfo-avatar {  
	  overflow:hidden;  
	  display: block;  
	  width: 160rpx;  
	  height: 160rpx;  
	  margin: 20rpx;  
	  margin-top: 110rpx;  
	  border-radius: 20rpx;  
	  border: 2px solid #fff;  
	  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); 
	}  

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 340upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;



		.card-bg {

			position: absolute;
			top: 0upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {

		padding: 28upx 0;
		margin-top: 20upx;
		background-color: #FFFFFF;


		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #FFFFFF;
		border-radius: 10upx;


		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
</style>
